<template>
  <div class="box_b">
    <div :id="chartId" :style="{ width, height }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'BoxLeftD',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    msg: String
  },
  data() {
    return {
      chartId: this.randomNum(),
      echart: null,
      colors: [
        '#36b67f',
        '#fff225',
        '#00aaff',
        '#fa4d4b',
        '#f8e9c9',
        '#886039',
        '#f9ac14',
        '#2c63fc',
        '#ffab66',
        '#7cff33'
      ],
      series: [
        {
          name: '毅兴行',
          value: 25.1
        },
        {
          name: '联兴达',
          value: 9.6
        },
        {
          name: '新龙鑫',
          value: 6.8
        },
        {
          name: '名祥科技',
          value: 11
        },
        {
          name: '美科安防',
          value: 4.2
        },
        {
          name: '塑高新',
          value: 3.1
        },
        {
          name: '其他',
          value: 27.9
        },
        {
          name: '琋谷信息',
          value: 12.3
        }
      ],
      centerX: '50%',
      angle: 0
    }
  },
  mounted() {
    this.initEchart()
    window.addEventListener('resize', this.handleUpdateSize())
  },
  activated() {
    this.echart?.resize()
  },
  methods: {
    randomNum() {
      let num = ''
      for (let i = 0; i < 10; i++) {
        num += Math.floor(Math.random() * 100)
      }
      return num
    },
    initEchart() {
      const chartDom = document.getElementById(this.chartId)
      if (!this.echart) {
        this.echart = echarts.init(chartDom)
      } else {
        this.echart.clear()
      }
      this.setOptions()
    },
    total() {
      let count = 0
      this.series.forEach((o) => {
        count += o.value
      })
      return count
    },
    getCirlPoint(x0, y0, r, angle) {
      //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
      let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
      return {
        x: x1,
        y: y1
      }
    },
    pieData() {
      let data = []
      this.series.forEach((o, i) => {
        o.itemStyle = {
          normal: {
            borderWidth: 1,
            shadowBlur: 1,
            borderRadius: 2,
            borderColor: this.colors[i],
            shadowColor: this.colors[i]
          }
        }
        o.label = {
          normal: {
            color: 'inherit'
          }
        }
        data.push(o, {
          value: this.total / 50,
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        })
      })
      return data
    },
    setOptions() {
      let option = {
        fontSize: 10,
        color: this.colors,
        series: [
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['40%', '15%'],
            center: [this.centerX, '40%'],
            hoverAnimation: true,
            itemStyle: {
              normal: {
                label: {
                  show: true
                }
              }
            },
            labelLine: {
              normal: {
                length: 14,
                length2: 14,
                lineStyle: {
                  // color: '#e6e6e6'
                }
              }
            },
            data: this.pieData(),
            label: {
              normal: {
                formatter: (params) => {
                  return params.name + '\n' + params.value + '%'
                },
                // padding: [0 , -100, 25, -100],
                rich: {
                  icon: {
                    fontSize: 10,
                    color: 'inherit'
                  },
                  name: {
                    fontSize: 10,
                    padding: [0, 0, 0, 10],
                    color: '#000'
                  },
                  value: {
                    fontSize: 9,
                    fontWeight: 'bolder',
                    padding: [10, 0, 0, 20],
                    color: 'inherit'
                    // color: '#333333'
                  }
                }
              }
            }
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: (params, api) => {
              return {
                type: 'arc',
                shape: {
                  // cx: api.getWidth() / 2,
                  cx: this.centerX,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.45,
                  startAngle: ((0 + this.angle) * Math.PI) / 180,
                  endAngle: ((360 + this.angle) * Math.PI) / 180
                },
                style: {
                  stroke: {
                    type: 'linear',
                    x: 1,
                    y: 0.5,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'transparent' // 0% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: '#00eaff' // 100% 处的颜色
                      }
                    ]
                  },
                  fill: 'transparent',
                  lineWidth: 1
                },
                // style: api.style(),
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: (params, api) => {
              // let x0 = api.getWidth() / 2
              let x0 = this.centerX
              let y0 = api.getHeight() / 2
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.45
              let point = this.getCirlPoint(x0, y0, r, -95 + this.angle)
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 2.5
                },
                style: {
                  stroke: '#00eaff', //绿
                  fill: '#00eaff'
                },
                silent: true
              }
            },
            data: [0]
          }
        ]
      }
      this.echart.setOption(option)
    },
    handleUpdateSize() {
      this.echart?.resize()
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.handleUpdateSize())
  }
}
</script>
<style scoped>
.box_b {
  height: 200px;
}
</style>
